<template>
	<view v-if="info">
		<form-item label="交易地址">
			<input disabled :value="info.address" />
		</form-item>
		
		<form-item label="交易描述">
			<input disabled :value="info.message"/>
		</form-item>
		
		<form-item label="交易类型">
			<image :src="`../../static/icon_${info.type}.png`" class="trade-type" mode=""></image>
		</form-item>
		
		<form-item label="联系方式">
			<input disabled :value="info.contact"/>
		</form-item>
	</view>
	
	<view v-else>
		<view class="skeleton">
			<view class="skeleton-item">
				<view class="skeleton-item__label"></view>
				<view class="skeleton-item__control"></view>
			</view>
			<view class="skeleton-item">
				<view class="skeleton-item__label"></view>
				<view class="skeleton-item__control"></view>
			</view>
			<view class="skeleton-item">
				<view class="skeleton-item__label"></view>
				<view class="skeleton-item__control"></view>
			</view>
			<view class="skeleton-item">
				<view class="skeleton-item__label"></view>
				<view class="skeleton-item__control"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { getTradeInfo, type Trade } from '../../api'

//交易详情
const info = ref<Trade>(null)

onLoad((query) => {
	// console.log('query', query.id)

	uni.showLoading({
		title:'加载中...'
	})

	setTimeout(()=>{
		//调用接口获取数据
		getTradeInfo(query.id).then((result) => {
			// console.log(result)
			
			info.value = result
			
			uni.hideLoading()
		})
	},2000)
})
</script>

<style lang="scss">
	// .form-item{
	// 	display: flex;
	// 	height: 100rpx;
	// 	border-bottom: 1px solid #000;
	// 	align-items: center;
	// 	&__label {
	// 		width: 200rpx;
	// 	}
		
	// 	&__control {
	// 		flex: 1;
	// 		overflow: hidden;
	// 		text-align: right;
	// 	}
	// }
	.trade-type{
		display: block;
		width: 60rpx;
		height: 60rpx;
		float: right;
	}
	
	@keyframes van-skeleton-blink {
	    50% {
	        opacity: .6
	    }
	}

	.skeleton{
		animation: van-skeleton-blink 1.2s ease-in-out infinite;
	}
	.skeleton-item{
		display: flex;
		height: 100rpx;
		border-bottom: 1px solid #000;
		justify-content: space-between;
		padding: 0 20rpx;
		align-items: center;
		&__label{
			width: 200rpx;
			height: 60rpx;
			background-color: #ccc;
		}
		&__control{
			height: 60rpx;
			background-color: #ccc;
			width: 400rpx;
		}
	}
</style>
